<template>
	<view>
		<home ref="home" v-if="PageCur=='home'" @navMethod="toNav"></home>
		<classify ref="classify" v-if="PageCur=='classify'" @navMethod="toNav"></classify>
		<cart ref="cart" v-if="PageCur=='cart'" @navMethod="toNav"></cart>
		<mine ref="mine" v-if="PageCur=='mine'" @navMethod="toNav"></mine>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view v-for="(item,index) in vuex_tabbar" :key="item.id">     <!--:key 保证组件和数据捆绑唯一 -->
				<view class="action" @click="NavChange" :data-cur="item.id">
					<view class='cuIcon-cu-image' style="margin-bottom: 5rpx;">
						<!-- <image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image> -->
						<u-icon :name="PageCur == item.id?item.selectedIconPath:item.iconPath" custom-prefix="custom-icon"  size="20px" :color="PageCur==item.id ? vuex_tabbarActiveColor:vuex_tabbarColor"></u-icon>
					</view>
					<view :style="{'color':PageCur==item.id ? vuex_tabbarActiveColor:vuex_tabbarColor}">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PageCur: 'home'//默认选中组件
			}
		},
		onShow() {
			if(this.PageCur == 'home' && this.$refs.home){
				this.$refs.home.onHandleShow()
			}else if(this.PageCur == 'classify' && this.$refs.classify){
				this.$refs.classify.onHandleShow()
			}else if(this.PageCur == 'cart' && this.$refs.cart){
				this.$refs.cart.onHandleShow()
			}else if(this.PageCur == 'mine' && this.$refs.mine){
				this.$refs.mine.onHandleShow()
			}
		},
		onLoad() {
			this.PageCur = this.vuex_pageCur
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
				this.$u.vuex('vuex_pageCur', this.PageCur);
			},
			toNav: function(cur) {
				this.PageCur = cur;
				this.$u.vuex('vuex_pageCur', this.PageCur);
			}
		}
	}
</script>

<style>

</style>